import './SceneMars3d.scss'
import { useState } from 'react'

import PropTypes from 'prop-types'
import { Mars3dMap, Mars3dTop, Mars3dList, Mars3dDetails } from '../../Assets/Mars3dEle'

import {
    CaretUpOutlined,
    CaretLeftOutlined,
} from '@ant-design/icons';
import { useEventEmitter } from 'ahooks';

const SceneMars3d = ({ data }) => {
    SceneMars3d.propTypes = { data: PropTypes.object }
    const [TopState, setTopState] = useState(true)
    const [ListState, setListState] = useState(true)
    const [DetailsState, setDetailsState] = useState(false)

    const MapEvent = useEventEmitter()
    MapEvent.useSubscription(val => {
        if (val.type === 'openDetails') setDetailsState(true)
        if (val.type === 'closeDetails') setDetailsState(false)
    })

    return (
        <div className="SceneMars3d">
            <div className='Map'>
                <Mars3dMap uuid={data.uuid} MapEvent={MapEvent} />
            </div>
            <div className={`Top ${TopState ? 'topShow' : 'topHiden'}`}>
                <div className='Switch' onClick={() => setTopState(!TopState)}>
                    <CaretUpOutlined />
                </div>
                <Mars3dTop MapEvent={MapEvent} />
            </div>
            <div className={`List ${TopState ? 'topShow' : 'topHiden'} ${ListState ? 'listShow' : 'listHiden'}`}>
                <div className='Switch' onClick={() => setListState(!ListState)}>
                    <CaretLeftOutlined />
                </div>
                <Mars3dList MapEvent={MapEvent} />
            </div>
            <div className={`Details ${TopState ? 'topShow' : 'topHiden'} ${DetailsState ? 'detailsShow' : 'detailsHiden'}`}>
                <Mars3dDetails MapEvent={MapEvent} />
            </div>
        </div>
    )
}

export default SceneMars3d